<template>
  <div :class="sideTheme" class="swiper-card">
    <swiper
      :autoplay="{
        disableOnInteraction: false,
        delay: 5000,
      }"
      :direction="direction"
      effect="fade"
      :mousewheel="{
        invert: true,
      }"
      :centered-slides="true"
      :modules="modules"
      :pagination="{ clickable: true }"
      navigation
      @transitionStart="transitionStart"
    >
      <swiper-slide v-for="(item, index) in list" :key="index">
        <div class="swiper-item" @click="toDetail(item.route)">
          <img class="item-img" :src="item.img" />
          <div class=" clearfix" :class="direction=='vertical'?'item-right':'min-item-right'">
            <p class="item-time">{{ item.createTime }}</p>
            <p class="item-title">{{ item.title }}</p>
            <p class="item-text">{{ item.content }}</p>
          </div>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script setup name="SwiperCard">
import { Autoplay, Pagination } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import 'swiper/swiper.min.css';
import 'swiper/css/autoplay';
import 'swiper/css/pagination'; // 轮播图底面的小圆点
import anime from 'animejs';

import { useElementBounding } from '@vueuse/core'
import { getArticle } from '@/api/home.js';
import { useSettingsStore } from '@/store';
import { onMounted, nextTick } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();

const settingsStore = useSettingsStore();
const sideTheme = computed(() => settingsStore.sideTheme);

const modules = [Autoplay, Pagination];
const direction = ref('vertical');
const pageNum = ref(1);
const pageSize = ref(5);
const total = ref(0);
const list = ref([]);

const transitionStart = (swiper) => {
  anime({
    targets: '.item-img',
    opacity: ['0', '1'],
    easing: 'easeOutCubic',
    duration: 1500,
    delay: 0,
  });
  anime({
    targets: '.swiper-card .item-time',
    opacity: {
      value: ['0', '1'],
      easing: 'easeOutCirc',
    },
    translateY: {
      value: [200, 0],
      easing: 'easeOutExpo',
    },
    duration: 1000,
    delay: 0,
  });
  anime({
    targets: '.swiper-card .item-title',
    opacity: {
      value: ['0', '1'],
      easing: 'easeOutCirc',
    },
    translateY: {
      value: [200, 0],
      easing: 'easeOutExpo',
    },
    duration: 1200,
    delay: 0,
  });
  anime({
    targets: '.swiper-card .item-text',
    opacity: {
      value: ['0', '1'],
      easing: 'easeOutCirc',
    },
    translateY: {
      value: [200, 0],
      easing: 'easeOutExpo',
    },
    duration: 1500,
    delay: 0,
  });
};

const getList = () => {
  getArticle({
    pageNum: pageNum.value,
    pageSize: pageSize.value,
  }).then((res) => {
    total.value = res.total;
    list.value = res.list;
  });
};

const toDetail = (e) => {
  router.push({ name: e });
};

onMounted(() => {
  getList();
});
nextTick(()=>{
  const el = document.body
  const { width } = useElementBounding(el);
  if (width.value < 580) {
    direction.value = 'horizontal';
  }
})
</script>

<style lang="scss" scoped>
.swiper-card {
  overflow: hidden;
  margin-top: 20px;
  width: 100%;
  height: 200px;
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);
  .swiper {
    width: 100%;
    height: 100%;
    z-index: 0;
  }
  .swiper-item {
    display: flex;
    .item-img {
      width: 180px;
      height: 180px;
      object-fit: cover;
      border-radius: 5px;
      -webkit-transition: filter 375ms ease-in 0.2s, -webkit-transform 0.6s;
    }
    .min-item-right {
      padding: 20px;
    }
    .item-right {
      padding: 20px 60px;
    }
    .item-time {
      margin: 10px 0;
      width: 100%;
      color: #4c4948;
      font-weight: 500;
      font-size: 15px;
      white-space: normal;      
      text-overflow: ellipsis;   
      overflow: hidden;         
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }
    .item-title {
      margin: 10px 0;
      width: 100%;
      font-size: 19px;
      font-weight: 700;
      color: #4c4948;
      -webkit-line-clamp: 1;
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
    }
    .item-text {
      margin: 20px 0;
      width: 100%;
      font-size: 15px;
      white-space: normal;      
      text-overflow: ellipsis;   
      overflow: hidden;         
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }
  }
}

.theme-dark {
  background: rgba(0, 0, 0, 0.5) !important;
  p {
    color: rgba(255, 255, 255, 0.9) !important;
  }
}
.swiper-item:hover {
  .item-img {
    transform: scale(1.1);
  }
}
.item-title:hover {
  color: #80c8f8 !important;
  cursor: url('../../assets/cur/x2.cur'), default;
}

::v-deep {
  .swiper-pagination-bullet {
    width: 11px;
    height: 11px;
    display: block;
    border-radius: 10px;
    background: #858585;
    opacity: 0.2;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -ms-transition: all 0.3s;
    transition: all 0.3s;
  }
  .swiper-pagination-bullet-active {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    background: #49b1f5;
    height: 30px;
  }
}

@media (max-width: 580px) {
  .swiper-card {
    padding-top: 20px;
    height: 360px;
    padding: 20px 10px !important;
  }
  .swiper-item {
    flex-wrap: wrap;
    .item-img {
      width: 100% !important;
      display: block;
    }
  }
  :deep(.swiper-pagination-bullet) {
    display: inline-block !important;
  }
  :deep(.swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical>.swiper-pagination-bullets) {
    top: 71%;
  }
  :deep(.swiper-pagination-bullet-active) {
    width: 30px;
    height: 11px;
  }
}
</style>
